/********************************************************************************
 *@description: 平台钱包统计
 *@author: Xhd
 *@API: 
 *@date: 2024-02-23 13:42:08
 *@version: V1.0.0
**********************************************************************************/

import React, { Component } from 'react';
import TheQueryForm from '@/components/TheQueryForm';
import TheTable from '@/components/TheTable';
import ThePagination from '@/components/ThePagination';
import TheButton from '@/components/TheButton';
import { Tooltip, } from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons";
import { apiWithdrawalRechargeStatisticsPage, apiWithdrawalRechargeStatisticsList } from "@/request/wallet/record";
import _ from "lodash";
import { getDateTime3 } from '@/utils/getDate';
import store from "@/store/store";
import { exportSheetTable } from "@/utils/exportTable";
import Json2Excel from '@/utils/Json2Excel'

class Wallet extends Component {
  constructor(props) {
    super(props)
    this.queryFormRef = React.createRef();
    this.state = {
      columns: [
        {
          title: "日期",
          dataIndex: "date",
          key: "date",
        },
        {
          title: "时间",
          dataIndex: "time",
          key: "time",
        },
        {
          title: "账户总额",
          dataIndex: "totalMoney",
          key: "totalMoney",
          filterDropdown: true, // 自定义的列筛选功能，我们占位为信息提示Icon的位置
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => {
                return <div>
                  账户总额=钱包总额+冻结金额
                </div>
              }} >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (text) => {
            return <React.$price price={text || 0} />
          }
        },
        {
          title: "钱包总额",
          dataIndex: "walletTotalMoney",
          key: "walletTotalMoney",
          render: (text) => {
            return <React.$price price={text || 0} />
          }
        },
        {
          title: "冻结金额",
          dataIndex: "frozenTotalMoney",
          key: "frozenTotalMoney",
          filterDropdown: true, // 自定义的列筛选功能，我们占位为信息提示Icon的位置
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => {
                return <div>
                  冻结金额=用户冻结金额+未接收的转账+未接收的红包+提现审核中金额
                </div>
              }} >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (text) => {
            return <React.$price price={text || 0} />
          }
        },
        {
          title: "充值金额",
          dataIndex: "rechargeTotalMoney",
          key: "rechargeTotalMoney",
          render: (text) => {
            return <React.$price price={text || 0} />
          }
        },
        {
          title: "已提现金额",
          dataIndex: "withdrawalTotalMoney",
          key: "withdrawalTotalMoney",
          render: (text) => {
            return <React.$price price={text || 0} />
          }
        },
      ],
      dataSource: [],
      pageData: { pageNo: 1, pageSize: 10 },
      total: 0,
      queryForm: {},
      searchOption: [
        { field: 'time', label: '时间', placeholder: '请选择', required: false, rules: [], type: 'RangePicker' },
      ],
    }
  }
  componentDidMount() {
    this.getData()
  }
  getData = async (values) => {
    if (values && !_.isEmpty(values.time)) {
      values.startTime = getDateTime3(values.time[0]) + ' 00:00:00'
      values.endTime = getDateTime3(values.time[1]) + ' 23:59:59'
      delete (values.time)
    }
    this.setState(
      {
        queryForm: values === undefined ? this.state.queryForm : { ...values },
      },
      async () => {
        const params = { ...this.state.queryForm, ...this.state.pageData, }
        store.dispatch({
          type: 'SaveSearchValues',
          data: { pathName: 'rechargeRecord', ...params }
        })
        console.log(params);
        let res = await apiWithdrawalRechargeStatisticsPage({ ...params })
        if (res.code === 0) {
          this.setState({
            dataSource: res.data,
            pageData: {
              pageNo: res.pageNo,
              pageSize: res.pageSize
            },
            total: res.totalCount
          })
        }
      });
  };
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: { pageNo, pageSize, },
    }, () => {
      this.getData();
    }
    );
  };
  onReset = () => {
    this.setState({
      queryForm: { searchTime: " " },
    },
      () => {
        this.getData();
      }
    );
  }
  onFormSearch = (values) => {
    this.getData(values);
  }
  //表格导出
  async toExportTable() {
    this.setState({ down_loading: true });
    let { queryForm } = this.state
    await apiWithdrawalRechargeStatisticsList({ ...queryForm })
      .then((res) => {
        if (res.code === 0 && res.data.length > 0) {
          let tH_data = [
            {
              title: "平台钱包统计列表",
              prop: "",
              children: [
                { prop: 'date', title: '日期' },
                { prop: 'time', title: '时间' },
                { prop: 'totalMoney', title: '账户总额', valueType: 'number' },
                { prop: 'walletTotalMoney', title: '钱包总额', valueType: 'number' },
                { prop: 'frozenTotalMoney', title: '冻结金额', valueType: 'number' },
                { prop: 'rechargeTotalMoney', title: '充值金额', valueType: 'number' },
                { prop: 'withdrawalTotalMoney', title: '已提现金额', valueType: 'number' },
              ],
            },
          ];
          let tB_data = res.data.map((item) => {
            // var reg = /^(\d{3})\d{4}(\d{4})$/;
            // var memberMobile = item.memberMobile.toString().replace(reg, '$1****$2');
            return {
              date: item.date,
              time: item.time,
              totalMoney: (item.totalMoney / 100).toFixed(2),
              walletTotalMoney: (item.walletTotalMoney / 100).toFixed(2),
              frozenTotalMoney: (item.frozenTotalMoney / 100).toFixed(2),
              rechargeTotalMoney: (item.rechargeTotalMoney / 100).toFixed(2),
              withdrawalTotalMoney: (item.withdrawalTotalMoney / 100).toFixed(2),
            };
          });
          const option = {
            header: [
              { prop: 'date', title: '日期' },
              { prop: 'time', title: '时间' },
              { prop: 'totalMoney', title: '账户总额', valueType: 'n' },
              { prop: 'walletTotalMoney', title: '钱包总额', valueType: 'n' },
              { prop: 'frozenTotalMoney', title: '冻结金额', valueType: 'n' },
              { prop: 'rechargeTotalMoney', title: '充值金额', valueType: 'n' },
              { prop: 'withdrawalTotalMoney', title: '已提现金额', valueType: 'n' },
            ],
            dataSource: tB_data,
            fileName: '平台钱包统计'
          }
          Json2Excel(option)
          this.setState({ down_loading: false });

          return
          exportSheetTable({
            fileName: "平台钱包统计",
            tH_data: tH_data,
            tB_data: tB_data,
            isSheet: true,
            merge: true,
          });
        } else {
          React.$message({
            type: "warning",
            content: "导出操作失败,请重试",
          });
          this.setState({ exportLoading: false });
        }
      })
      .catch((err) => {
        React.$message({
          type: "warning",
          content: "导出操作失败,请重试",
        });
        this.setState({ exportLoading: false });
      });
  }
  getRowClassName(record, index) {
    if (typeof record !== 'object') return
    return record.hasError === 1 ? "warning" : ''
  }

  render() {
    const { columns, dataSource, pageData: { pageNo, pageSize }, total, searchOption, exportLoading } = this.state;
    return (<div className='p-layout-box'>
      <TheQueryForm ref={(ref) => (this.queryFormRef = ref)} show={true} option={searchOption} onReset={() => this.onReset()} onGetValues={(values) => this.onFormSearch(values)} >
        <TheButton type="primary" size='middle' haspermi={["wallet:wallet:export"]}
          onClick={() => this.toExportTable()}
          loading={exportLoading} >导出</TheButton>
      </TheQueryForm>
      <TheTable scroll={{ x: 'max-content', y: '63vh' }} columns={columns} dataSource={dataSource} 
       rowClassName={this.getRowClassName} showTools={true} />
      <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
    </div>)
  }
}

export default Wallet